<template>
	<div class="search-panel">
		<!-- 搜索内容区域 -->
		<div class="search-content">
			<div class="form-wrapper">
				<!-- 一行式搜索布局 -->
				<div v-if="hasCommonFields || hasAdvancedFields || hasPrimaryFields" class="inline-search-container">
					<!-- 左侧表单内容区域 -->
					<div class="search-form-container">
						<el-form
							ref="tableSearchRef"
							:model="props.modelValue"
							label-position="right"
							:label-width="tableLabelWidth"
							class="search-form inline-search-form"
							@keyup.enter="onSearch(tableSearchRef)"
						>
							<!-- 基础条件 -->
							<div v-if="hasCommonFields" class="common-fields-content">
								<slot name="common"></slot>
							</div>
							<!-- 主要搜索区域（支持内部自定义展开逻辑） -->
							<div v-if="hasPrimaryFields" class="primary-fields-content">
								<slot name="primary" :showAdvanced="state.showAdvanced" :toggleAdvanced="toggleAdvanced"></slot>
							</div>
							<!-- 更多条件（展开区域） -->
							<Transition name="slide-fade">
								<div v-if="state.showAdvanced" class="advanced-fields-content">
									<slot name="advanced"></slot>
								</div>
							</Transition>
						</el-form>
					</div>

					<!-- 右侧操作按钮区域 -->
					<div class="action-buttons-container">
						<div class="action-buttons">
							<!-- 重置按钮 -->
							<el-button @click="onReset(tableSearchRef)" class="reset-button" size="default">
								<el-icon>
									<Refresh />
								</el-icon>
								<span>重置</span>
							</el-button>
							<!-- 查询按钮 -->
							<el-button type="primary" @click="onSearch(tableSearchRef)" class="search-button" size="default">
								<el-icon>
									<Search />
								</el-icon>
								<span>查询</span>
							</el-button>
							<!-- 展开/收起按钮 - 只在查询条件较多时显示 -->
							<el-button v-if="shouldShowToggleButton" @click="toggleAdvanced" link size="small" class="expand-toggle-btn">
								<el-icon class="expand-icon" :class="{ expanded: state.showAdvanced }">
									<ArrowDown />
								</el-icon>
								{{ state.showAdvanced ? '收起' : '展开' }}
							</el-button>
						</div>
					</div>
				</div>

				<!-- 默认搜索条件区域（兼容原有用法） -->
				<div v-if="!hasCommonFields && !hasAdvancedFields && !hasPrimaryFields" class="inline-search-container">
					<!-- 左侧表单内容区域 -->
					<div class="search-form-container">
						<el-form
							ref="tableSearchRef"
							:model="props.modelValue"
							label-position="right"
							:label-width="tableLabelWidth"
							class="search-form inline-search-form"
							@keyup.enter="onSearch(tableSearchRef)"
						>
							<slot></slot>
						</el-form>
					</div>

					<!-- 右侧操作按钮区域 -->
					<div class="action-buttons-container">
						<div class="action-buttons">
							<!-- 重置按钮 -->
							<el-button @click="onReset(tableSearchRef)" class="reset-button" size="default">
								<el-icon>
									<Refresh />
								</el-icon>
								<span>重置</span>
							</el-button>
							<!-- 查询按钮 -->
							<el-button type="primary" @click="onSearch(tableSearchRef)" class="search-button" size="default">
								<el-icon>
									<Search />
								</el-icon>
								<span>查询</span>
							</el-button>
							<!-- 展开/收起按钮 - 为默认用法也添加展开按钮 -->
							<el-button v-if="shouldShowToggleButton" @click="toggleAdvanced" link size="small" class="expand-toggle-btn">
								<el-icon class="expand-icon" :class="{ expanded: state.showAdvanced }">
									<ArrowDown />
								</el-icon>
								{{ state.showAdvanced ? '收起' : '展开' }}
							</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, useSlots } from 'vue';
import { Search, Refresh, ArrowDown, ArrowUp } from '@element-plus/icons-vue';

// 表单引用
const tableSearchRef = ref();
const advancedSearchRef = ref();
const tableLabelWidth = ref('auto');
// 定义组件事件
const emit = defineEmits(['search', 'update:modelValue']);

/**
 * 组件属性接口
 */
interface Props {
	/** 搜索数据模型 */
	modelValue: Record<string, any>;
	/** 是否显示切换高级条件的按钮 */
	showToggleAdvanced?: boolean;
	/** 默认展开高级条件 */
	defaultExpandAdvanced?: boolean;
	/** 最小展开条件数量阈值 */
	minFieldsForToggle?: number;
}

/**
 * 组件属性默认值
 */
const props = withDefaults(defineProps<Props>(), {
	showToggleAdvanced: true,
	defaultExpandAdvanced: false,
	minFieldsForToggle: 5,
});

// 获取插槽
const slots = useSlots();

/**
 * 组件状态接口
 */
interface State {
	/** 表单数据 */
	form: Record<string, any>;
	/** 是否显示高级条件 */
	showAdvanced: boolean;
}

/**
 * 组件状态
 */
const state = reactive<State>({
	form: {},
	showAdvanced: props.defaultExpandAdvanced,
});

/**
 * 计算属性：是否有常用字段
 */
const hasCommonFields = computed(() => !!slots.common);

/**
 * 计算属性：是否有高级字段
 */
const hasAdvancedFields = computed(() => !!slots.advanced);

/**
 * 计算属性：是否有主要字段（支持内部自定义展开逻辑）
 */
const hasPrimaryFields = computed(() => !!slots.primary);

/**
 * 计算属性：检测 primary 插槽是否包含内部展开逻辑
 * 通过检查插槽函数的字符串表示来判断
 */
const hasPrimaryInternalToggle = computed(() => {
	if (!hasPrimaryFields.value) return false;

	try {
		// 尝试渲染 primary 插槽来检查是否使用了 showAdvanced 参数
		const primarySlot = slots.primary;
		if (primarySlot) {
			// 简化检测逻辑：检查插槽函数的字符串是否包含 showAdvanced 参数
			const slotFnStr = primarySlot.toString();
			if (slotFnStr.includes('showAdvanced')) {
				return true;
			}

			// 备用检测：检查插槽函数是否接受参数
			// 如果插槽函数接受参数，说明它可能使用了 showAdvanced 逻辑
			const slotParams = slotFnStr.match(/\([^)]*\)/);
			if (slotParams && slotParams[0].includes('showAdvanced')) {
				return true;
			}
		}
	} catch (error) {
		// 如果检测失败，默认返回 false（保守策略）
		console.warn('Failed to detect primary slot internal toggle logic, defaulting to false:', error);
		return false;
	}

	return false;
});

/**
 * 计算属性：是否需要显示展开收起按钮
 * 简化逻辑，确保展开按钮能正确显示
 */
const shouldShowToggleButton = computed(() => {
	// 如果明确设置为不显示，直接返回false
	if (!props.showToggleAdvanced) {
		return false;
	}

	// 简化逻辑：只要存在任何插槽就显示展开按钮
	// 这样可以确保展开功能在所有场景下都能正常工作
	return hasCommonFields.value || hasAdvancedFields.value || hasPrimaryFields.value;
});

/**
 * 切换高级搜索条件的显示/隐藏
 * @description 点击高级条件展开/收起按钮时触发
 */
const toggleAdvanced = (): void => {
	state.showAdvanced = !state.showAdvanced;
};

/**
 * 执行搜索操作
 * @description 验证表单数据并触发搜索事件
 * @param formEl - Element Plus 表单实例
 */
const onSearch = (formEl: any | undefined): void => {
	if (!formEl) return;

	// 验证表单
	formEl.validate((valid: boolean) => {
		if (valid) {
			// 触发搜索事件
			emit('search', props.modelValue);
		}
	});
};

/**
 * 重置表单数据
 * @description 清空表单数据并触发重置事件
 * @param formEl - Element Plus 表单实例
 */
const onReset = (formEl: any | undefined): void => {
	if (!formEl) return;

	// 重置表单字段
	formEl.resetFields();

	// 如果有高级搜索表单，也重置它
	if (advancedSearchRef.value) {
		advancedSearchRef.value.resetFields();
	}

	// 创建一个新的空对象来重置父组件的数据
	const resetData: Record<string, any> = {};
	Object.keys(props.modelValue).forEach((key) => {
		resetData[key] = null;
	});

	// 更新父组件的数据
	emit('update:modelValue', resetData);

	// 触发搜索事件
	emit('search', resetData);
};

// 暴露组件方法
defineExpose({
	inheritAttrs: false,
});
</script>

/** * 搜索面板组件样式 * * 样式特性： * - 响应式设计，支持桌面端和移动端 * - 直接展示，无折叠动画 * - 统一的表单控件样式 * - 悬停和聚焦状态的视觉反馈
*/
<style scoped lang="scss">
/* 搜索面板容器 */
.search-panel {
	background: var(--el-bg-color);
	border-radius: 8px;
	border: 1px solid var(--el-border-color);
	margin-bottom: 5px;
	box-shadow: var(--el-box-shadow-light);
}

/* ===== 一行式搜索布局样式 ===== */
.inline-search-container {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
}

/* 左侧表单容器 */
.search-form-container {
	flex: 1;
	min-width: 0; /* 防止flex子项溢出 */
}

/* 一行式表单样式 */
.inline-search-form {
	:deep(.el-row) {
		margin: 0;

		.el-col {
			padding: 0 8px;
			margin-bottom: 16px;

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}
	}
}

/* 右侧操作按钮容器 */
.action-buttons-container {
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	min-width: 220px; /* 确保按钮区域有足够空间 */
}

/* 操作按钮组 */
.action-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap; /* 保持按钮在同一行 */
	white-space: nowrap;

	/* 重置按钮样式 */
	.reset-button {
		height: 32px; /* 与输入框高度一致 */
		padding: 6px 14px; /* 调整内边距 */
		border-radius: 4px; /* 与Element Plus默认圆角一致 */
		font-size: 14px; /* 与输入框字体大小一致 */
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			transform: translateY(-1px); /* 减小悬停效果 */
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
		}

		&:active {
			transform: translateY(0);
			transition: all 0.1s ease;
		}
	}

	/* 查询按钮样式 */
	.search-button {
		height: 32px; /* 与输入框高度一致 */
		padding: 6px 16px; /* 调整内边距 */
		border-radius: 4px; /* 与Element Plus默认圆角一致 */
		font-size: 14px; /* 与输入框字体大小一致 */
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			transform: translateY(-1px); /* 减小悬停效果 */
			box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.25);
		}

		&:active {
			transform: translateY(0);
			transition: all 0.1s ease;
		}
	}

	/* 展开按钮样式 */
	.expand-toggle-btn {
		height: 28px; /* 略小于主按钮 */
		padding: 4px 10px; /* 调整内边距 */
		font-size: 12px; /* 略小字体 */
		border-radius: 4px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		.expand-icon {
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			&.expanded {
				transform: rotate(180deg);
			}
		}

		&:hover {
			.expand-icon {
				transform: scale(1.1);

				&.expanded {
					transform: rotate(180deg) scale(1.1);
				}
			}
		}
	}
}

/* ===== 响应式设计 ===== */
/* 平板及以下设备 */
@media (max-width: 1024px) {
	.inline-search-container {
		gap: 16px;
	}

	.action-buttons-container {
		min-width: 200px;
	}

	.action-buttons {
		gap: 10px;

		.reset-button,
		.search-button {
			height: 32px; /* 与输入框保持一致 */
			padding: 6px 14px;
			font-size: 14px; /* 保持与输入框一致 */
		}

		.expand-toggle-btn {
			height: 28px; /* 略小于主按钮 */
		}
	}
}

/* 手机横屏及以下 */
@media (max-width: 768px) {
	.inline-search-container {
		flex-direction: column;
		gap: 16px;
	}

	.action-buttons-container {
		align-self: stretch;
		min-width: auto;
		padding-top: 0;
	}

	.action-buttons {
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 12px;

		.reset-button,
		.search-button {
			height: 32px; /* 与输入框保持一致 */
			flex: 1;
			min-width: 80px;
			padding: 6px 14px;
			font-size: 14px; /* 保持与输入框一致 */
		}

		.expand-toggle-btn {
			flex: 0 0 auto;
			height: 28px; /* 略小于主按钮 */
		}
	}
}

/* 小屏手机 */
@media (max-width: 480px) {
	.inline-search-container {
		gap: 12px;
	}

	.action-buttons {
		gap: 8px;

		.reset-button,
		.search-button {
			height: 32px; /* 与输入框保持一致 */
			padding: 5px 12px; /* 稍微减小内边距适应小屏 */
			font-size: 14px; /* 保持与输入框一致 */

			.el-icon {
				margin-right: 4px;
			}
		}

		.expand-toggle-btn {
			height: 28px; /* 略小于主按钮 */
			padding: 3px 8px;
			font-size: 12px;
		}
	}
}

.header-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
	justify-content: flex-end;

	:deep(.el-button) {
		// 基础样式
		height: 32px;
		padding: 6px 16px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.5;

		// 简约过渡
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		user-select: none;

		// 内容对齐
		display: inline-flex;

		// 悬停动画效果
		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.3);
		}

		// 点击动画效果
		&:active {
			transform: translateY(0);
			transition: all 0.1s ease;
		}
		align-items: center;
		justify-content: center;
		gap: 6px;

		// 重置按钮样式 - 简约灰色
		&.reset-button {
			background: var(--el-fill-color-blank);
			color: var(--el-text-color-regular);
			border: 1px solid var(--el-border-color);

			.el-icon {
				font-size: 14px;
				color: var(--el-text-color-secondary);
			}

			span {
				color: var(--el-text-color-regular);
			}

			&:hover {
				background: var(--el-fill-color-light);
				border-color: var(--el-border-color-hover);
				color: var(--el-text-color-primary);

				.el-icon {
					color: var(--el-text-color-primary);
				}

				span {
					color: var(--el-text-color-primary);
				}
			}

			&:active {
				background: var(--el-fill-color);
			}
		}

		// 查询按钮样式 - 简约主色
		&.search-button {
			background: var(--el-color-primary);
			color: var(--el-color-white);
			border: 1px solid var(--el-color-primary);

			.el-icon {
				font-size: 14px;
				color: var(--el-color-white);
			}

			span {
				color: var(--el-color-white);
				font-weight: 500;
			}

			&:hover {
				background: var(--el-color-primary-light-3);
				border-color: var(--el-color-primary-light-3);
			}

			&:active {
				background: var(--el-color-primary-dark-2);
				border-color: var(--el-color-primary-dark-2);
			}
		}

		// 展开/收起按钮样式 - 链接样式
		&.expand-toggle-btn {
			background: transparent;
			color: var(--el-color-primary);
			border: none;
			padding: 6px 12px;
			font-size: 13px;

			.el-icon {
				font-size: 12px;
				color: var(--el-color-primary);
			}

			&:hover {
				background: var(--el-color-primary-light-9);
				color: var(--el-color-primary-dark-2);

				.el-icon {
					color: var(--el-color-primary-dark-2);
				}
			}

			&:active {
				background: var(--el-color-primary-light-8);
			}
		}

		// 禁用状态
		&:disabled,
		&.is-disabled {
			opacity: 0.5;
			cursor: not-allowed;

			&:hover {
				background: var(--el-fill-color-blank) !important;
				border-color: var(--el-border-color) !important;
			}
		}

		// 聚焦状态 - 简约
		&:focus-visible {
			outline: 2px solid var(--el-color-primary-light-7);
			outline-offset: 1px;
		}
	}
}

/* 搜索内容区域 */
.search-content {
	background: var(--el-bg-color);
}

.form-wrapper {
	padding: 20px;
	background: var(--el-fill-color-blank);
	border-radius: 8px;
}

/* 统一搜索条件区域 */
.search-fields-section {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--el-border-color-light);

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
		gap: 8px;

		.section-title {
			font-size: 14px;
			font-weight: 600;
			color: var(--el-text-color-primary);
			position: relative;
			padding-left: 12px;
			line-height: 1.5;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
			min-width: 0;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 16px;
				background: var(--el-color-primary);
				border-radius: 2px;
			}
		}

		.expand-toggle-wrapper {
			display: flex;
			justify-content: center;
			margin-top: 16px;
			margin-bottom: 0;
		}

		.expand-toggle-btn {
			height: 32px;
			padding: 6px 12px;
			font-size: 13px;
			color: var(--el-color-primary);
			background: var(--el-color-primary-light-9);
			border: 1px solid var(--el-color-primary-light-7);
			border-radius: 6px;
			transition: all 0.2s ease;

			&:hover {
				background: var(--el-color-primary-light-8);
				border-color: var(--el-color-primary-light-5);
			}

			.el-icon {
				margin-right: 4px;
				font-size: 12px;
			}
		}
	}

	.common-fields-content {
		margin-bottom: 0;
	}

	.advanced-fields-content {
		margin-top: 0;
		padding-top: 0;
		transition: all 0.3s ease;
	}
}

/* 更多条件展开动画 */
.slide-fade-enter-active {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-fade-leave-active {
	transition: all 0.25s cubic-bezier(0.4, 0, 0.6, 1);
}

.slide-fade-enter-from {
	opacity: 0;
	transform: translateY(-12px);
	max-height: 0;
}

.slide-fade-leave-to {
	opacity: 0;
	transform: translateY(-8px);
	max-height: 0;
}

.advanced-fields-content {
	overflow: hidden;
}

/* 展开收起按钮动画 */
.expand-toggle-btn {
	.expand-icon {
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&.expanded {
			transform: rotate(180deg);
		}
	}

	// 按钮悬停效果
	&:hover {
		.expand-icon {
			transform: scale(1.1);

			&.expanded {
				transform: rotate(180deg) scale(1.1);
			}
		}
	}
}

/* 搜索区域整体动画 */
.search-fields-section {
	transition: all 0.2s ease;

	.search-form {
		transition: all 0.2s ease;
	}
}

/* 主要搜索区域动画 */
.primary-fields-content {
	transition: all 0.2s ease;

	// 为内部的表单元素添加统一的动画效果
	:deep(.el-form-item) {
		transition: all 0.2s ease;
	}

	// 展开区域的表单项交错动画
	:deep(.el-col) {
		transition: all 0.3s ease;

		@for $i from 1 through 12 {
			&:nth-child(#{$i}) {
				transition-delay: #{($i - 1) * 0.05}s;
			}
		}
	}
}

/* 搜索表单样式 */
.search-form {
	:deep(.el-row) {
		margin: 0;

		.el-col {
			padding: 0 8px;
			margin-bottom: 16px;

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}
	}

	:deep(.el-form-item) {
		margin-bottom: 0;
		display: flex;
		align-items: flex-start;

		.el-form-item__label {
			color: var(--el-text-color-primary);
			font-weight: 500;
			font-size: 14px;
			line-height: 32px;
			margin-bottom: 0;
			text-align: right;
			padding-right: 8px;
			flex-shrink: 0;
			/* 固定宽度，避免与 label-width 属性冲突 */
			width: 120px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.el-form-item__content {
			flex: 1;
			min-width: 0;
			position: relative;
			max-width: 300px; /* 限制下拉框最大宽度 */

			.el-form-item__error {
				position: absolute;
				top: 100%;
				left: 0;
				font-size: 12px;
				color: var(--el-color-danger);
				line-height: 1;
				padding-top: 4px;
			}
		}
	}

	:deep(.el-input) {
		width: 100%;

		.el-input__wrapper {
			width: 100%;
			border-radius: 6px;
			transition: all 0.2s ease;
			border: 1px solid var(--el-border-color);
			background-color: var(--el-fill-color-blank);
			box-shadow: 0 1px 3px var(--el-box-shadow-light);
			display: flex;
			align-items: center;

			&:hover {
				border-color: var(--el-border-color-hover);
			}

			&.is-focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
			}

			.el-input__inner {
				width: 100%;
				padding: 8px 12px;
				font-size: 14px;
				line-height: 1.5;
				color: var(--el-text-color-primary);
				background-color: transparent;
				flex: 1;

				&::placeholder {
					color: var(--el-text-color-placeholder);
					font-size: 13px;
				}
			}
		}
	}

	:deep(.el-select) {
		width: 100%;

		.el-select__wrapper {
			width: 100%;
			border-radius: 6px;
			transition: all 0.2s ease;
			border: 1px solid var(--el-border-color);
			background-color: var(--el-fill-color-blank);
			box-shadow: 0 1px 3px var(--el-box-shadow-light);
			min-height: 32px;
			max-height: 32px;
			display: flex;
			align-items: center;

			&:hover {
				border-color: var(--el-border-color-hover);
			}

			&.is-focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
			}

			.el-select__selected-item {
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.4;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.el-select__placeholder {
				font-size: 13px;
				padding: 6px 12px;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// color: var(--el-text-color-primary) !important;
			}

			.el-select__caret {
				font-size: 12px;
				margin-right: 8px;
				flex-shrink: 0;
			}

			.el-select__tags {
				padding: 2px 8px;

				.el-tag {
					margin: 2px 4px 2px 0;
					font-size: 12px;
					height: 20px;
					line-height: 18px;

					.el-tag__close {
						font-size: 10px;
					}
				}
			}
		}

		// 下拉面板样式优化
		.el-select-dropdown {
			border-radius: 6px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border: 1px solid var(--el-border-color-light);

			.el-select-dropdown__item {
				padding: 8px 12px;
				font-size: 14px;
				line-height: 1.4;

				&:hover {
					background-color: var(--el-fill-color-light);
				}

				&.selected {
					background-color: var(--el-color-primary-light-9);
					color: var(--el-color-primary);
				}
			}
		}

		// 搜索输入框样式
		.el-select-dropdown__wrap {
			.el-input {
				margin: 8px;

				.el-input__wrapper {
					border-radius: 4px;
					border: 1px solid var(--el-border-color);

					.el-input__inner {
						padding: 6px 8px;
						font-size: 13px;
					}
				}
			}
		}
	}

	:deep(.el-cascader) {
		width: 100%;

		.el-cascader__wrapper {
			width: 100%;
			border-radius: 6px;
			transition: all 0.2s ease;
			border: 1px solid var(--el-border-color);
			background-color: var(--el-fill-color-blank);
			box-shadow: 0 1px 3px var(--el-box-shadow-light);
			min-height: 32px;
			max-height: 32px;
			display: flex;
			align-items: center;

			&:hover {
				border-color: var(--el-border-color-hover);
			}

			&.is-focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
			}

			.el-cascader__label {
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.4;
				color: var(--el-text-color-primary);
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.el-cascader__placeholder {
				font-size: 13px;
				padding: 6px 12px;
				color: var(--el-text-color-placeholder);
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.el-cascader__caret {
				font-size: 12px;
				margin-right: 8px;
				flex-shrink: 0;
			}
		}

		// 级联下拉面板样式优化
		.el-cascader__dropdown {
			border-radius: 6px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border: 1px solid var(--el-border-color-light);

			.el-cascader-node {
				padding: 8px 12px;
				font-size: 14px;
				line-height: 1.4;

				&:hover {
					background-color: var(--el-fill-color-light);
				}

				&.is-active {
					background-color: var(--el-color-primary-light-9);
					color: var(--el-color-primary);
				}

				.el-cascader-node__label {
					font-size: 14px;
					line-height: 1.4;
				}

				.el-cascader-node__postfix {
					font-size: 12px;
					color: var(--el-text-color-secondary);
				}
			}
		}
	}

	:deep(.el-date-editor) {
		width: 100%;

		.el-input__wrapper {
			width: 100%;
			border-radius: 6px;
			transition: all 0.2s ease;
			border: 1px solid var(--el-border-color);
			background-color: var(--el-fill-color-blank);
			box-shadow: 0 1px 3px var(--el-box-shadow-light);
			display: flex;
			align-items: center;

			&:hover {
				border-color: var(--el-border-color-hover);
			}

			&.is-focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
			}

			.el-input__inner {
				width: 100%;
				padding: 8px 12px;
				font-size: 14px;
				line-height: 1.5;
				color: var(--el-text-color-primary);
				background-color: transparent;
				flex: 1;

				&::placeholder {
					color: var(--el-text-color-placeholder);
					font-size: 13px;
				}
			}
		}
	}

	:deep(.el-input-number) {
		width: 100%;

		.el-input__wrapper {
			width: 100%;
			border-radius: 6px;
			transition: all 0.2s ease;
			border: 1px solid var(--el-border-color);
			background-color: var(--el-fill-color-blank);
			box-shadow: 0 1px 3px var(--el-box-shadow-light);
			display: flex;
			align-items: center;

			&:hover {
				border-color: var(--el-border-color-hover);
			}

			&.is-focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
			}

			.el-input__inner {
				width: 100%;
				padding: 8px 12px;
				font-size: 14px;
				line-height: 1.5;
				color: var(--el-text-color-primary);
				background-color: transparent;
				flex: 1;
			}

			.el-input-number__decrease,
			.el-input-number__increase {
				border: none;
				background-color: transparent;
				color: var(--el-text-color-regular);

				&:hover {
					background-color: var(--el-fill-color-light);
					color: var(--el-color-primary);
				}
			}
		}
	}

	:deep(.el-textarea) {
		width: 100%;

		.el-textarea__inner {
			width: 100%;
			border-radius: 6px;
			transition: all 0.2s ease;
			border: 1px solid var(--el-border-color);
			background-color: var(--el-fill-color-blank);
			box-shadow: 0 1px 3px var(--el-box-shadow-light);
			padding: 8px 12px;
			font-size: 14px;
			line-height: 1.5;
			color: var(--el-text-color-primary);
			resize: vertical;

			&:hover {
				border-color: var(--el-border-color-hover);
			}

			&:focus {
				border-color: var(--el-color-primary);
				box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
				outline: none;
			}

			&::placeholder {
				color: var(--el-text-color-placeholder);
				font-size: 13px;
			}
		}
	}

	// 支持原有的class样式
	:deep(.search-input) {
		width: 100%;
	}

	:deep(.search-select) {
		width: 100%;
	}

	:deep(.mb15) {
		margin-bottom: 15px;
	}

	:deep(.mb20) {
		margin-bottom: 20px;
	}

	// 范围输入框样式
	:deep(.range-input-container) {
		display: flex;
		align-items: center;
		gap: 8px;

		.range-input-start,
		.range-input-end {
			flex: 1;
			min-width: 0;
		}

		.range-separator {
			font-size: 12px;
			color: var(--el-text-color-secondary);
			font-weight: 500;
			white-space: nowrap;
		}
	}

	// 确保级联选择器与select完全一致
	:deep(.el-cascader) {
		&.width100 {
			width: 100% !important;
		}
	}

	// 强制统一所有选择器的高度
	:deep(.el-select),
	:deep(.el-cascader),
	:deep(.el-input),
	:deep(.el-date-editor),
	:deep(.el-input-number) {
		.el-select__wrapper,
		.el-cascader__wrapper,
		.el-input__wrapper {
			min-height: 32px !important;
			max-height: 32px !important;
			height: 32px !important;
		}
	}
}

/* 响应式设计 - 完整的断点适配 */

/* 超大屏幕 (≥1920px) */
// @media screen and (min-width: 1920px) {
// 	.search-form {
// 		:deep(.el-form-item) {
// 			.el-form-item__label {
// 				min-width: 140px;
// 			}
// 		}
// 	}
// }

/* 大屏幕 (1200px - 1919px) */
// @media screen and (min-width: 1200px) and (max-width: 1919px) {
// 	.search-form {
// 		:deep(.el-form-item) {
// 			.el-form-item__label {
// 				min-width: 120px;
// 			}
// 		}
// 	}
// }

/* 中等屏幕 (992px - 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.search-form {
		:deep(.el-form-item) {
			.el-form-item__label {
				// min-width: 100px;
				font-size: 13px;
			}
		}

		// 只对常用搜索区域应用强制布局，高级搜索保持原有布局
		:deep(.common-search-form) {
			.el-row .el-col {
				// 在中等屏幕适当调整列宽
				&[class*='el-col-6'] {
					flex: 0 0 50% !important;
					max-width: 50% !important;
				}
			}
		}

		// 高级搜索表单完全不受强制布局影响，按页面原有配置显示
		:deep(.advanced-search-form) {
			.el-row .el-col {
				// 清除所有强制布局规则，恢复Element Plus原生栅格系统
				margin-bottom: 16px;
			}
		}
	}

	.header-actions {
		:deep(.el-button) {
			height: 30px;
			padding: 5px 14px;
			font-size: 12px;
		}
	}
}

/* 小屏幕平板 (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.search-panel {
		margin-bottom: 8px;
	}

	.header-actions {
		gap: 10px;
		margin-bottom: 18px;
		flex-wrap: wrap;
		justify-content: flex-end;

		:deep(.el-button) {
			height: 30px;
			padding: 5px 14px;
			font-size: 12px;
			min-width: 80px;

			.el-icon {
				font-size: 13px;
			}
		}
	}

	.search-form {
		:deep(.el-form-item) {
			.el-form-item__label {
				min-width: 80px;
				font-size: 13px;
				line-height: 1.4;
				white-space: normal;
				word-break: break-word;
			}
		}

		// 统一搜索表单样式
		:deep(.unified-search-form) {
			.el-row .el-col {
				margin-bottom: 10px;
			}

			// 基础条件区域 - 在平板端强制单列布局
			.common-fields-content {
				.el-row .el-col {
					&[class*='el-col-6'] {
						flex: 0 0 100% !important;
						max-width: 100% !important;
					}
					&[class*='el-col-8'] {
						flex: 0 0 100% !important;
						max-width: 100% !important;
					}
					&[class*='el-col-12'] {
						flex: 0 0 100% !important;
						max-width: 100% !important;
					}
				}
			}

			// 展开的更多条件 - 保持响应式布局
			.advanced-fields-content {
				.el-row .el-col {
					// 保持Element Plus原生响应式行为
					margin-bottom: 10px;
				}
			}
		}
	}

	.form-wrapper {
		padding: 18px;
	}

	.section-header {
		.section-title {
			font-size: 14px;
		}

		.toggle-advanced-btn {
			font-size: 12px;
		}
	}
}

/* 移动端 (≤767px) */
@media screen and (max-width: 767px) {
	.search-panel {
		margin-bottom: 10px;
		border-radius: 6px;
		box-shadow: var(--el-box-shadow);
	}

	.header-actions {
		gap: 8px;
		margin-bottom: 16px;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;

		:deep(.el-button) {
			height: 36px;
			padding: 8px 16px;
			font-size: 14px;
			border-radius: 6px;
			flex: 1;
			max-width: 120px;

			.el-icon {
				font-size: 14px;
			}

			span {
				margin-left: 4px;
			}
		}
	}

	.search-form {
		:deep(.el-row) {
			.el-col {
				// 移动端强制单列布局
				flex: 0 0 100% !important;
				max-width: 100% !important;
				padding: 0;
				margin-bottom: 16px;
			}
		}

		:deep(.el-form-item) {
			flex-direction: column;
			align-items: stretch;
			margin-bottom: 0;

			.el-form-item__label {
				text-align: left;
				margin-bottom: 8px;
				min-width: auto;
				max-width: none;
				padding-right: 0;
				line-height: 1.5;
				font-size: 14px;
				font-weight: 500;
				color: var(--el-text-color-primary);
				white-space: normal;
				word-wrap: break-word;
				word-break: break-word;
			}

			.el-form-item__content {
				max-width: none;
				margin-left: 0 !important;
			}
		}

		// 移动端表单控件优化
		:deep(.el-select),
		:deep(.el-cascader),
		:deep(.el-input),
		:deep(.el-date-editor),
		:deep(.el-input-number) {
			width: 100%;

			.el-select__wrapper,
			.el-cascader__wrapper,
			.el-input__wrapper {
				min-height: 40px !important;
				height: 40px !important;
				font-size: 16px; // 防止iOS缩放
			}
		}

		:deep(.el-textarea) {
			.el-textarea__inner {
				min-height: 80px;
				font-size: 16px; // 防止iOS缩放
			}
		}
	}

	.form-wrapper {
		padding: 16px;
		border-radius: 6px;
	}

	.search-fields-section {
		.section-header {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			margin-bottom: 16px;

			.section-title {
				font-size: 16px;
				font-weight: 600;
				color: var(--el-text-color-primary);
			}

			.toggle-advanced-btn {
				font-size: 13px;
				height: 28px;
				padding: 4px 8px;

				.el-icon {
					font-size: 12px;
				}
			}
		}
	}

	// 移动端范围输入优化
	:deep(.range-input-container) {
		flex-direction: column;
		gap: 8px;
		align-items: stretch;

		.range-input-start,
		.range-input-end {
			flex: none;
		}

		.range-separator {
			text-align: center;
			font-size: 12px;
			padding: 4px 0;
		}
	}
}

/* 超小屏幕 (≤480px) */
@media screen and (max-width: 480px) {
	.search-panel {
		margin-bottom: 8px;
		border-radius: 4px;
	}

	.header-actions {
		gap: 6px;
		margin-bottom: 12px;

		:deep(.el-button) {
			height: 34px;
			padding: 6px 12px;
			font-size: 13px;
			min-width: 70px;

			.el-icon {
				font-size: 13px;
			}
		}
	}

	.form-wrapper {
		padding: 12px;
	}

	.search-form {
		:deep(.el-row) {
			.el-col {
				margin-bottom: 12px;
			}
		}

		:deep(.el-form-item) {
			.el-form-item__label {
				font-size: 13px;
				margin-bottom: 6px;
			}
		}

		:deep(.el-select),
		:deep(.el-cascader),
		:deep(.el-input),
		:deep(.el-date-editor),
		:deep(.el-input-number) {
			.el-select__wrapper,
			.el-cascader__wrapper,
			.el-input__wrapper {
				min-height: 36px !important;
				height: 36px !important;
			}
		}
	}

	.search-fields-section {
		.section-header {
			.section-title {
				font-size: 14px;
			}

			.toggle-advanced-btn {
				font-size: 12px;
				height: 26px;
				padding: 3px 6px;
			}
		}
	}
}
/* 响应式设计 - 小屏幕优化 */
@media (max-width: 768px) {
	.search-panel {
		margin-bottom: 8px;
		border-radius: 6px;
	}

	.form-wrapper {
		padding: 16px;
	}

	/* 小屏幕下调整头部操作按钮的顺序和位置 */
	.header-actions {
		order: -1; /* 确保操作按钮始终在顶部 */
		margin-bottom: 16px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--el-border-color-lighter);
		justify-content: space-between;

		:deep(.el-button) {
			height: 36px;
			padding: 8px 16px;
			font-size: 14px;
			flex: 1;
			max-width: 120px;

			&.reset-button,
			&.search-button {
				.el-icon {
					font-size: 16px;
				}
			}
		}
	}

	/* 调整区域标题和内容的间距 */
	.search-fields-section {
		margin-bottom: 16px;
		padding-bottom: 16px;

		.section-header {
			margin-bottom: 12px;

			.section-title {
				font-size: 13px;
			}

			.toggle-advanced-btn {
				padding: 6px 8px;
				font-size: 11px;
			}
		}
	}

	/* 表单响应式调整 */
	:deep(.search-form) {
		.el-form-item {
			margin-bottom: 16px;

			.el-form-item__label {
				font-size: 13px;
				line-height: 1.4;
				padding-bottom: 4px;
			}

			.el-form-item__content {
				.el-input,
				.el-select,
				.el-date-picker {
					.el-input__inner {
						height: 36px;
						font-size: 14px;
					}
				}
			}
		}
	}

	/* 统计信息在小屏幕下的调整 */
	.statistics-section {
		.statistics-content {
			flex-direction: column;
			gap: 8px;

			.statistic-item {
				justify-content: space-between;
				padding: 8px 12px;

				.statistic-label {
					font-size: 12px;
				}

				.statistic-value {
					font-size: 14px;
				}
			}
		}
	}
}

/* 超小屏幕优化 (手机竖屏) */
@media (max-width: 480px) {
	.form-wrapper {
		padding: 12px;
	}

	.header-actions {
		flex-direction: column;
		gap: 8px;

		:deep(.el-button) {
			max-width: none;
			width: 100%;
		}
	}

	/* 表单标签在超小屏幕下的调整 */
	:deep(.search-form) {
		:deep(.el-form-item) {
			.el-form-item__label {
				min-width: 80px !important;
				width: 80px !important;
			}
		}
	}

	.search-fields-section {
		.section-header {
			.section-title {
				font-size: 12px;
			}

			.toggle-advanced-btn {
				font-size: 10px;
				padding: 4px 6px;
			}
		}
	}
}

/* 中等屏幕优化 (平板) */
@media (min-width: 769px) and (max-width: 1024px) {
	.header-actions {
		:deep(.el-button) {
			height: 34px;
			padding: 7px 16px;
		}
	}

	:deep(.search-form) {
		.el-form-item {
			.el-form-item__content {
				.el-input,
				.el-select,
				.el-date-picker {
					.el-input__inner {
						height: 34px;
					}
				}
			}
		}
	}
}
</style>
